<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      {include file="public/header" /}
      <link rel="stylesheet" type="text/css" href="__UPLOADER__/webuploader.css">
      <link href="__UMEDITOR__/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
      <script type="text/javascript" src="__UMEDITOR__/third-party/jquery.min.js"></script>
      <script type="text/javascript" src="__UMEDITOR__/third-party/template.min.js"></script>
      <script type="text/javascript" charset="utf-8" src="__UMEDITOR__/umeditor.config.js"></script>
      <script type="text/javascript" charset="utf-8" src="__UMEDITOR__/umeditor.min.js"></script>
      <script type="text/javascript" src="__UMEDITOR__/lang/zh-cn/zh-cn.js"></script>
      <script type="text/javascript" src="__UPLOADER__/webuploader.js"></script>
  </head>
  
  <body>
    <div class="x-body">
        <form class="layui-form">
          <div class="layui-form-item"  style="z-index:20;">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>文章标题
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="username" name="username" required="" lay-verify="required"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
            <div class="layui-form-item"  style="z-index:20;">
                <label for="keywords" class="layui-form-label">
                    <span class="x-red"></span>文章关键词
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="keywords" name="keywords" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item"  style="z-index:20;">
                <label for="description" class="layui-form-label">
                    <span class="x-red"></span>文章关描述
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="description" name="description" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="z-index:50;">
                <label for="articleType" class="layui-form-label">
                    <span class="x-red">*</span>文章分类
                </label>
                <div class="layui-input-inline">
                    <select id="articleType" class="layui-select" style="z-index:100;">
                        <option value="">请选择</option>
                        {foreach name="TypeData" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
          <div class="layui-form-item"  style="z-index:20;">
              <label class="layui-form-label">
                  <span class="x-red">*</span>上传轮播图
              </label>
              <div id="uploader-demo">
                  <!--用来存放item-->
                  <div id="fileList" class="uploader-list"></div>
                  <div id="filePicker">选择图片</div>
                  <input type="hidden" id="imgArticle">
              </div>
          </div>

          <div class="layui-form-item layui-form-text" style="z-index:20;">
              <label for="desc" class="layui-form-label">
                  文章
              </label>
              <div class="layui-input-block">
                  <script type="text/plain" id="myEditor" style="width:2000px;height:700px;">
                      <p></p>
                  </script>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button type="button" class="layui-btn" onClick="formType()">
                  增加
              </button>
          </div>
      </form>
    </div>
    <script>
        // 初始化Web Uploader
        var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,

            // swf文件路径
            swf: "__UPLOADER__/js/Uploader.swf",

            // 文件接收服务端。
            server: "http://www.qy.com/upload/picture",

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');


            // $list为容器jQuery实例
            var $list = $("#fileList");
            $list.append( $li );

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, 100, 100 );
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
            }

            $percent.css( 'width', percentage * 100 + '%' );
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file, data ) {
            $( '#'+file.id ).addClass('upload-state-done');
            if(data.status != 1){
                window.location.reload();
            }
            $('#imgArticle').val(data.data);
        });

        // 文件上传失败，显示上传出错。
        uploader.on( 'uploadError', function( file ) {
            console.log(file);
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }
            $error.text('上传失败');
            window.location.reload();
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });

        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
          //自定义验证规则
          form.verify({
            nikename: function(value){
              if(value.length < 5){
                return '昵称至少得5个字符啊';
              }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
          });

        });
    </script>
    <script>
        var um = UM.getEditor('myEditor');
        var layer;
        /*    var insertHtml = $("#insertHtml").val();
            um.execCommand('insertHtml', insertHtml);*/
        layui.use(['layer', 'element'], function () {
            layer = layui.layer;
        })
        var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    function formType() {
        var username = $('#username').val();
        var articleType = $('#articleType').val();
        var myEditor = UM.getEditor('myEditor').getContent();
        var imgArticle = $('#imgArticle').val();
        var keywords = $('#keywords').val();
        var description = $('#description').val();
        var isTj = 1;
        if(imgArticle==undefined || imgArticle=="" || imgArticle==null){
            isTj = 2;
            layer.alert('请上传文章轮播图', {
                skin: 'layui-layer-molv' //样式类名
                ,closeBtn: 0,icon: 5
            });
        }
        if(username==undefined || username=="" || username==null){
            isTj = 2;
            layer.alert('请填写文章标题', {
                skin: 'layui-layer-molv' //样式类名
                ,closeBtn: 0,icon: 5
            });
        }
        if(articleType==undefined || articleType=="" || articleType==null){
            isTj = 2;
            layer.alert('请选择文章分类', {
                skin: 'layui-layer-molv' //样式类名
                ,closeBtn: 0,icon: 5
            });
        }
        if(myEditor==undefined || myEditor=="" || myEditor==null){
            isTj = 2;
            layer.alert('请填写文章', {
                skin: 'layui-layer-molv' //样式类名
                ,closeBtn: 0,icon: 5
            });
        }
        if(isTj == 1){
            $.ajax({
                url:"{:url('article/add')}",
                type:'post',
                dataType:"json",
                data:{
                    username:username,
                    articleType:articleType,
                    myEditor:myEditor,
                    imgArticle:imgArticle,
                    keywords:keywords,
                    description:description
                },
                success:function(data){
                    data = JSON.parse(data);
                    if(data.status == 1){
                        layer.alert("增加成功", {closeBtn: 0,icon: 6},function () {
                            var index = parent.layer.getFrameIndex(window.name);
                            window.parent.location.reload();
                            parent.layer.close(index);
                        });
                    }else{
                        layer.alert(data.msg, {
                            skin: 'layui-layer-molv' //样式类名
                            ,closeBtn: 0,icon: 5
                        });
                    }
                }
            })
        }
    }
    </script>
  </body>

</html>